<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>记忆课堂</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <style>
    .test-box, .handler-box {
      padding: 16px 10px;
    }
    .test-area {
      min-height: 500px;
    }
    .test-item {
      position: relative;
      background: #fff;
      margin-bottom: 10px;
      padding: 10px 15px;
      box-shadow: 1px 1px 1px #ccc;
    }
    .resultCount {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  </style>
</head>
<body>
  
  <div id="app">
    
    <div class="bar clearfix">
      <div class="container">
        <div class="pull-left">
          <a href="/"><span class="back">Home</span></a>
        </div>
        <span class="bar-en">memory class</span>
        <div class="user-box pull-right">
          <a :href="'/user/center.html?id=' + userInfo.id" v-if="logined">
            <span class="user-name">{{userInfo.name.slice(0,2)}}</span>
          </a>
          <a href="/loginPage" v-show="!logined">
            <span class="my-btn">登陆</span>
          </a>
        </div>
      </div>
    </div>
    
    <div class="container mt20 body">
      <h4 class="text-center text-muted">书到用时方恨少，事非经过不知难。</h4>
      <test-area-component></test-area-component>
    </div>

  </div>

  <footer>
      
  </footer>


  <template id="test-item">
    <div class="test-item clearfix">
      <p>
        <a  class="color-orange" :href="'/test/test.html?id=' + item.id + '&type=1'">
          {{index + 1}}. {{item.name}}
        </a>
      </p>
      <p class="text-muted">
        <strong>习题介绍： </strong>此习题是<strong>{{item.autor}}</strong>所出，
        习题所属类型为<strong>{{testTypes[item.type - 1]}}</strong>，
        该习题是<strong> {{item.daType == 1? '判断题': '自由答题'}} </strong>
      </p>
      <p>
        <strong>习题描述：</strong>
        {{item.desc}}
      </p>
      <p class="">
        <a class="text-primary" :href="'/test/test.html?id=' + item.id + '&type=1' ">攻克此练习</a>
      </p>
      <div class="resultCount">
        <span class=" glyphicon glyphicon-bookmark"></span>{{item.resultCount}}人已参加
      </div>
    </div>
  </template>
  
  <template id="testArea">
    <div class="container test-area">
      <div class="filter-box clearfix">
        <div class="col-md-2 pull-right">
          <input type="text" class="form-control" v-model="filterKeyword" placeholder="输入关键字过滤" @keyup.13="getList">
        </div>
      </div>
      <div class="test-box">
        <test-item-component v-for="(item, index) in list" :index="index" :item="item"></test-item-component>
      </div>

      <div class="handler-box text-right">
        <button class="btn btn-default" v-show="page > 1" @click="getList(page - 1)">
          上一页
        </button>
        <button class="btn btn-default" v-show="list.length == 10" @click="getList(page + 1)">
          下一页
        </button>
      </div>
    </div>

  </template>


  <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
  <script src="/lib/vue/vue-resource.min.js"></script>
  <script>
    Vue.use(VueResource)

    var testItemComponent =  Vue.extend({
      template: '#test-item',
      data: function () {
        return {
          testTypes: ['IT知识', '生活常识', '问卷调查'],
        }
      },
      props: ['item', 'index']
    })

    var testAreaComponent = Vue.extend({
      template: '#testArea',
      data: function () {
        return {
          list: [],
          page: 1,
          filterKeyword: ''
        }
      },
      mounted: function () {
        this.getList(1)
      },
      methods: {
        getList: function (page) {
          if (isNaN(+ page)) {
            page = this.page
          }
  
          if (page < 1) {
            return alert('页码错误')
          }
          var filter = {}
          if (this.filterKeyword) {
            filter = {
              params: {
                keyword: this.filterKeyword
              }
            }
          }
          
          this.$http.get('/test/type/1/page/' + page, filter).then(function (res) {
            console.log(res.data)
            if (res.data.code == 100) {
              if (res.data.data.list.length) {
                this.list = res.data.data.list
                this.page = page
              } else {
                alert('已经到最后一页了！')
              }
            } else if (res.data.code == 112){
              this.list = []
            } else {
              alert(res.data.msg)
            }
          })
        }
      },
      components: {
        'test-item-component': testItemComponent
      }

    })

    new Vue({
      el: '#app',
      data: {
        logined: false,
        userInfo: {
          name: '',
          id: ''
        }
      },
      mounted: function () {
        var user = localStorage.memoryClassUser
        if (user) {
          this.logined = true
          this.userInfo = JSON.parse(user)
        }
      },
      methods: {
        getPractice: function (page) {

        }
      },
      components: {
        'test-area-component': testAreaComponent
      }
    })

  </script>
</body>
</html>